<template>
  <view 
    v-if="show"
    class="fu-alert"
    :class="[
      `fu-alert--${type}`,
      { 'fu-alert--closeable': closeable }
    ]"
  >
    <!-- 图标 -->
    <view class="fu-alert__icon">
      <text class="fu-icon">{{ iconMap[type] }}</text>
    </view>
    
    <!-- 内容 -->
    <view class="fu-alert__content">
      <!-- 标题 -->
      <view 
        v-if="title"
        class="fu-alert__title"
      >{{ title }}</view>
      
      <!-- 描述 -->
      <view 
        v-if="description"
        class="fu-alert__description"
      >
        <slot>{{ description }}</slot>
      </view>
    </view>
    
    <!-- 关闭按钮 -->
    <view 
      v-if="closeable"
      class="fu-alert__close"
      @click="onClose"
    >
      <text class="fu-icon">&#xe6a3;</text>
    </view>
  </view>
</template>

<script>
/**
 * fu-alert 警告提示组件
 * @description 警告提示，展现需要关注的信息
 * @property {Boolean} show - 是否显示
 * @property {String} title - 标题
 * @property {String} description - 辅助性文字
 * @property {String} type - 类型，可选值为 info success warning error
 * @property {Boolean} closeable - 是否可关闭
 * @event {Function} close - 关闭时触发
 */
export default {
  name: 'fu-alert',
  props: {
    show: {
      type: Boolean,
      default: true
    },
    title: {
      type: String,
      default: ''
    },
    description: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'info',
      validator: value => ['info', 'success', 'warning', 'error'].includes(value)
    },
    closeable: {
      type: Boolean,
      default: false
    }
  },
  emits: ['update:show', 'close'],
  data() {
    return {
      iconMap: {
        info: '&#xe6e5;',
        success: '&#xe6e1;',
        warning: '&#xe6e6;',
        error: '&#xe6e8;'
      }
    }
  },
  methods: {
    onClose() {
      this.$emit('update:show', false)
      this.$emit('close')
    }
  }
}
</script>

<style lang="scss" scoped>
.fu-alert {
  position: relative;
  display: flex;
  align-items: flex-start;
  padding: 16rpx 32rpx;
  border-radius: var(--fu-radius-base);
  font-size: 28rpx;
  line-height: 1.5;
  
  &--info {
    color: var(--fu-info-color);
    background-color: var(--fu-info-light-color);
    
    .fu-alert__icon {
      color: var(--fu-info-color);
    }
  }
  
  &--success {
    color: var(--fu-success-color);
    background-color: var(--fu-success-light-color);
    
    .fu-alert__icon {
      color: var(--fu-success-color);
    }
  }
  
  &--warning {
    color: var(--fu-warning-color);
    background-color: var(--fu-warning-light-color);
    
    .fu-alert__icon {
      color: var(--fu-warning-color);
    }
  }
  
  &--error {
    color: var(--fu-danger-color);
    background-color: var(--fu-danger-light-color);
    
    .fu-alert__icon {
      color: var(--fu-danger-color);
    }
  }
  
  &__icon {
    margin-right: 16rpx;
    font-size: 32rpx;
    
    .fu-icon {
      font-family: 'fuIcon';
    }
  }
  
  &__content {
    flex: 1;
  }
  
  &__title {
    font-weight: 500;
  }
  
  &__description {
    margin-top: 8rpx;
    font-size: 24rpx;
    opacity: 0.8;
  }
  
  &__close {
    margin-left: 16rpx;
    cursor: pointer;
    
    .fu-icon {
      font-family: 'fuIcon';
      font-size: 32rpx;
    }
    
    &:active {
      opacity: 0.7;
    }
  }
}
</style> 